<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./css/bootstrap.min.css" />
		<style>
			.ul-txet li span:nth-child(1){
				/* margin-right: 100px; */
				font-weight: bold;	
			}
			.ul-txet li{
				
				font-size: 14px;
			}
			.ul-txet li:nth-child(1){
			
				font-size: 14px;
				font-weight: bold;	
			}
			.ul-nav li a{
				/* text-align: center; */
				/* margin: 0px 10px; */
				height: 56px;
				line-height: 40px;
				align-self: baseline;
			}
			.ul-nav li.navActive{
				background-color: #eee;
			}
			.ul-nav li :active {
				/* text-align: center; */
				width: 100%;
				background-color: #eee;
			}
		</style>
	</head>
	<body>
		<nav class="navbar navbar-expand-lg navbar-light bg-light m-0 p-0">
			<div class="container">
				<a class="navbar-brand" href="#">后台管理</a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
				  <span class="navbar-toggler-icon"></span>
				</button>
						
				<div class="collapse navbar-collapse" id="navbarSupportedContent">
				  <ul class="ul-nav navbar-nav mr-auto">
				    <li class="nav-item">
				      <a class="nav-link" href="./first.html">后台首页</a>
				    </li>
				    <li class="nav-item">
				      <a class="nav-link" href="./second.html">用户管理</a>
				    </li>
				    <li class="nav-item navActive">
				      <a class="nav-link " href="#">内容管理</a>
				    </li>
				    <li class="nav-item">
				      <a class="nav-link"  href="./fourth.html">标签管理</a>
				    </li>
				  </ul>
				  <ul class="navbar-nav ml-auto">
					  <li class="nav-item dropdown ">
					    <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
					      admin
					    </a>
					    <div class="dropdown-menu">
					      <a class="dropdown-item" href="#">Action</a>
					      <a class="dropdown-item" href="#">Another action</a>
					      <div class="dropdown-divider"></div>
					      <a class="dropdown-item" href="#">Something else here</a>
					    </div>
					  </li>
					  <li class="nav-item">
					    <a class="nav-link " href="">退出</a>
					  </li>
				  </ul>
				  <!-- <form class="form-inline my-2 my-lg-0">
				    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
				    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
				  </form> -->
				</div>
			</div>
		</nav>
		<div class="container mt-3">
			<div class="row">
			  <div class="col-md-2 col-lg-2 col-sm-2" >
			    <div class="list-group w-100" id="list-tab" role="tablist">
			      <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">用户管理</a>
			      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">添加用户</a>
			    </div>
			  </div>
			  <div class="col-md-10 col-lg-10 col-sm-10>
			    <div class="tab-content" id="nav-tabContent">
			      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
					  <p class="border-bottom pb-3">内容管理</p>
					  <ul class="nav nav-tabs" id="myTab" role="tablist">
					    <li class="nav-item" role="presentation">
					      <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">用户列表</button>
					    </li>
					    <li class="nav-item" role="presentation">
					      <button class="nav-link" id="contact-tab" data-toggle="tab" data-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">添加用户</button>
					    </li>
					  </ul>
					  <div class="tab-content" id="myTabContent">
					    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
							<div class="row pt-2 pb-2 border-bottom">
								<div class="col-md-3 col-sm-3 col-lg-3 d-flex justify-content-start" style="font-weight: bold;" 	>
									文章标题
								</div>
								<div class="col-md-9 col-lg-9 col-sm-9 d-flex justify-content-end" style="font-weight: bold;">
									<span class="mr-5">作者</span>
									<span class="mr-5 ml-5">发布时间</span>
									<span class="mr-5 ml-3">操作</span>
								</div>
								
							</div>
							<div class="row pt-2 pb-2 border-bottom">
								<div class="col-md-4 col-lg-4 col-sm-4 d-flex justify-content-start" style="font-weight: bold;" 	>
									泛Mooc职业教育，效果和就业为王！
								</div>
								<div class="col-md-8 col-lg-8 col-sm-8 d-flex justify-content-end" >
									<span class="mr-5">朱朝兵</span>
									<span class="mr-5 ml-4">2015/08/08</span>
									<div class=" btn-group mr-1 ml-1" role="group" aria-label="Button group  nested dropdown">
									  <div class="btn-group d-flex justify-content-start" role="group">
									    <button type="button" class="btn btn-light dropdown-toggle border" data-toggle="dropdown" aria-expanded="false">
									      操作
									    </button>
									    <div class="dropdown-menu">
									      <a class="dropdown-item" href="#">Dropdown link</a>
									      <a class="dropdown-item" href="#">Dropdown link</a>
									    </div>
									  </div>
									</div>
								</div>
								
							</div>
							<div class="row pt-2 pb-2 border-bottom">
								<div class="col-md-4 col-lg-4 col-sm-4 d-flex justify-content-start" style="font-weight: bold;" 	>
									泛Mooc职业教育，效果和就业为王！
								</div>
								<div class="col-md-8 col-lg-8 col-sm-8 d-flex justify-content-end" >
									<span class="mr-5">朱朝兵</span>
									<span class="mr-5 ml-4">2015/08/08</span>
									<div class=" btn-group mr-1 ml-1" role="group" aria-label="Button group  nested dropdown">
									  <div class="btn-group d-flex justify-content-start" role="group">
									    <button type="button" class="btn btn-light dropdown-toggle border" data-toggle="dropdown" aria-expanded="false">
									      操作
									    </button>
									    <div class="dropdown-menu">
									      <a class="dropdown-item" href="#">Dropdown link</a>
									      <a class="dropdown-item" href="#">Dropdown link</a>
									    </div>
									  </div>
									</div>
								</div>
								
							</div>
							<div class="row pt-2 pb-2 border-bottom">
								<div class="col-md-4 col-lg-4 col-sm-4 d-flex justify-content-start" style="font-weight: bold;" 	>
									泛Mooc职业教育，效果和就业为王！
								</div>
								<div class="col-md-8 col-lg-8 col-sm-8 d-flex justify-content-end" >
									<span class="mr-5">朱朝兵</span>
									<span class="mr-5 ml-4">2015/08/08</span>
									<div class=" btn-group mr-1 ml-1" role="group" aria-label="Button group  nested dropdown">
									  <div class="btn-group d-flex justify-content-start" role="group">
									    <button type="button" class="btn btn-light dropdown-toggle border" data-toggle="dropdown" aria-expanded="false">
									      操作
									    </button>
									    <div class="dropdown-menu">
									      <a class="dropdown-item" href="#">Dropdown link</a>
									      <a class="dropdown-item" href="#">Dropdown link</a>
									    </div>
									  </div>
									</div>
								</div>
								
							</div>
							<div class="row pt-2 pb-2 border-bottom">
								<div class="col-md-4 col-lg-4 col-sm-4 d-flex justify-content-start" style="font-weight: bold;" 	>
									泛Mooc职业教育，效果和就业为王！
								</div>
								<div class="col-md-8 col-lg-8 col-sm-8 d-flex justify-content-end" >
									<span class="mr-5">朱朝兵</span>
									<span class="mr-5 ml-4">2015/08/08</span>
									<div class=" btn-group mr-1 ml-1" role="group" aria-label="Button group  nested dropdown">
									  <div class="btn-group d-flex justify-content-start" role="group">
									    <button type="button" class="btn btn-light dropdown-toggle border" data-toggle="dropdown" aria-expanded="false">
									      操作
									    </button>
									    <div class="dropdown-menu">
									      <a class="dropdown-item" href="#">Dropdown link</a>
									      <a class="dropdown-item" href="#">Dropdown link</a>
									    </div>
									  </div>
									</div>
								</div>
								
							</div>
							<div class="row pt-2 pb-2 border-bottom">
								<div class="col-md-4 col-lg-4 col-sm-4 d-flex justify-content-start" style="font-weight: bold;" 	>
									泛Mooc职业教育，效果和就业为王！
								</div>
								<div class="col-md-8 col-lg-8 col-sm-8 d-flex justify-content-end" >
									<span class="mr-5">朱朝兵</span>
									<span class="mr-5 ml-4">2015/08/08</span>
									<div class=" btn-group mr-1 ml-1" role="group" aria-label="Button group  nested dropdown">
									  <div class="btn-group d-flex justify-content-start" role="group">
									    <button type="button" class="btn btn-light dropdown-toggle border" data-toggle="dropdown" aria-expanded="false">
									      操作
									    </button>
									    <div class="dropdown-menu">
									      <a class="dropdown-item" href="#">Dropdown link</a>
									      <a class="dropdown-item" href="#">Dropdown link</a>
									    </div>
									  </div>
									</div>
								</div>
								
							</div>
							<div class="row pt-2 pb-2 border-bottom">
								<div class="col-md-4 col-lg-4 col-sm-4 d-flex justify-content-start" style="font-weight: bold;" 	>
									泛Mooc职业教育，效果和就业为王！
								</div>
								<div class="col-md-8 col-lg-8 col-sm-8 d-flex justify-content-end" >
									<span class="mr-5">朱朝兵</span>
									<span class="mr-5 ml-4">2015/08/08</span>
									<div class=" btn-group mr-1 ml-1" role="group" aria-label="Button group  nested dropdown">
									  <div class="btn-group d-flex justify-content-start" role="group">
									    <button type="button" class="btn btn-light dropdown-toggle border" data-toggle="dropdown" aria-expanded="false">
									      操作
									    </button>
									    <div class="dropdown-menu">
									      <a class="dropdown-item" href="#">Dropdown link</a>
									      <a class="dropdown-item" href="#">Dropdown link</a>
									    </div>
									  </div>
									</div>
								</div>
								
							</div>
							<div class="row pt-2 pb-2 ">
								<div class="col-md-4 col-lg-4 col-sm-4 d-flex justify-content-start" style="font-weight: bold;" 	>
									泛Mooc职业教育，效果和就业为王！
								</div>
								<div class="col-md-8 col-lg-8 col-sm-8 d-flex justify-content-end" >
									<span class="mr-5">朱朝兵</span>
									<span class="mr-5 ml-4">2015/08/08</span>
									<div class=" btn-group mr-1 ml-1" role="group" aria-label="Button group  nested dropdown">
									  <div class="btn-group d-flex justify-content-start" role="group">
									    <button type="button" class="btn btn-light dropdown-toggle border" data-toggle="dropdown" aria-expanded="false">
									      操作
									    </button>
									    <div class="dropdown-menu">
									      <a class="dropdown-item" href="#">Dropdown link</a>
									      <a class="dropdown-item" href="#">Dropdown link</a>
									    </div>
									  </div>
									</div>
								</div>
								
							</div>
							<div class="row">
								<div class="col-12 d-flex justify-content-center">
									<nav aria-label="Page navigation example">
									  <ul class="pagination">
									    <li class="page-item">
									      <a class="page-link" href="#" aria-label="Previous">
									        <span aria-hidden="true">&laquo;</span>
									      </a>
									    </li>
									    <li class="page-item "><a class="page-link bg-primary text-light" href="#">1</a></li>
									    <li class="page-item"><a class="page-link" href="#">2</a></li>
									    <li class="page-item"><a class="page-link" href="#">3</a></li>
										<li class="page-item"><a class="page-link" href="#">4</a></li>
										<li class="page-item"><a class="page-link" href="#">5</a></li>
										<li class="page-item"><a class="page-link" href="#">6</a></li>
									    <li class="page-item">
									      <a class="page-link" href="#" aria-label="Next">
									        <span aria-hidden="true">&raquo;</span>
									      </a>
									    </li>
									  </ul>
									</nav>
								</div>
							</div>
						</div>
					    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
					    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
					  </div>
				  </div>
			      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
					  
				  </div>
			      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">
					  
				  </div>
			    </div>
			  </div>
			</div>
		</div>
		
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.bundle.js"></script>
	</body>
</html>